<template>
  <div>
    <div class="table-page-search">
      <a-form>
        <a-form-item label="部门名称" >
          <a-input placeholder="请输入" v-model="queryParam.deptName"/>
        </a-form-item>
        <a-form-item label="状态">
          <a-select placeholder="请选择" v-model="queryParam.status">
            <a-select-option
              v-for="dict in Dict.getLocal('statusTextDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="this.fetch">查询</a-button>
          <a-button @click="() => queryParam = {}">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-has="'system:dept:add'" type="primary" @click="$refs.modal.add()">新建</a-button>
    </div>
    <a-table
      ref="table"
      rowKey="deptId"
      :pagination="pagination"
      :loading="loading"
      :columns="columns"
      :dataSource="data">

      <span slot="status" slot-scope="text">
        <DictTag :options="Dict.getLocal('statusTextDict')" :value="text" isText />
      </span>

      <span slot="action" slot-scope="text, record">
        <a v-has="'system:dept:edit'" @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a v-has="'system:dept:add'" @click="handleAdd(record.deptId+'')">新增</a>
        <a-divider type="vertical" />
        <a v-has="'system:dept:remove'" @click="delById(record.deptId)">删除</a>
      </span>
    </a-table>

    <dept-modal ref="modal" @ok="handleOk"/>
  </div>
</template>

<script>
import { Table as T } from 'ant-design-vue'
import { getDeptList, delDept } from '@/api/system/system'
import DeptModal from './modules/DeptModal.vue'
import { treeData } from '@/utils/treeutil'
import DictTag from '@/components/DictTag'

export default {
  name: 'TableList',
  components: {
    T,
    DeptModal,
    DictTag
  },
  data () {
    return {
      visible: false,
      form: null,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '部门名称',
          dataIndex: 'deptName'
        },
        {
          title: '排序',
          dataIndex: 'orderNum'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [],
      pagination: false,
      loading: false,
    }
  },
  created () {
    this.fetch()
  },
  methods: {
    handleAdd (parentId) {
      this.$refs.modal.add(parentId)
    },
    handleEdit (record) {
      this.$refs.modal.edit(record)
    },
    handleOk () {
      this.fetch()
    },
    delById (id) {
      delDept(id).then(res => {
        if (res.code === 0) {
          this.$message.success(`删除成功`)
          this.handleOk()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    fetch () {
      this.loading = true
      getDeptList(Object.assign(this.queryParam)).then(res => {
        this.data = treeData(res.rows, 'deptId')
        this.loading = false
        console.log(this.data)
      })
    }
  }
}
</script>
